<template>
  <el-row class="demo-avatar demo-basic">
    <el-col >
      <div class="demo-basic--circle">

          <el-avatar :size="70" :src="avatarUrl" />

      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
// 用户头像组件，接收传来的头像值

import { reactive, toRefs } from 'vue'
export default {
  name: "Avatar",
  props:{
    avatarUrl:''
  },
}
</script>

<style scoped>
.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>
